<template lang="">
  <div class="home">
    <div class="head">
      <el-row :gutter="15">
        <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
          <!--  轮播图 -->
          <el-carousel :interval="5000" type="card" trigger="click" height="255px" class="slideshow  wow slideInLeft">
            <el-carousel-item v-for="(item,index) in imgs" :key="index">
              <div class="slideshowBox" @click="GotoDetail(item.id)">
                <img class="headImg" :src="item.pic_url" alt="">
                <div class="title threed"><span>{{item.title}}</span></div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :lg="6" :xl="6">
          <!-- 轮播图旁边的盒子 -->
          <div class="kk wow slideInLeft">
            <div class="img1" :key="index" v-for="(item,index) in headerArticle">
              <img :src="item.pic_url" @click="GotoDetail(item.id)" alt="">
              <div class="tit">{{item.title}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="kk main marginTop wow slideInLeft" style="margin-top: 0;">
        <titel-box title="技术博文" class="title-box wow slideInLeft" data-wow-delay="0.4s"></titel-box>
        <article-box></article-box>
      </div>
    </div>
  </div>
</template>
<script>
    import WOW from 'wowjs';
    import titelBox from '@/components/titelBox/titelBox.vue'
    import articleBox from '../../components/article/articleBox.vue'
    export default {
        data() {
            return {
                imgs: [],
                //盒子数据
                headerArticle: []
            }
        },
        components: {
            titelBox,
            articleBox
        },
        methods: {
            getLbtArticle() {
                this.$axios.get('/Lunbo').then(res => {
                    if (res.data.state == 200) {
                        this.imgs = res.data.result.slice(0, 4)
                        this.headerArticle = res.data.result.slice(4, 6)
                    }
                })
            },
            //详情页
            GotoDetail(id) {
                this.$router.push({
                    path: 'detailLun/' + id
                })
            }
        },
        mounted() {
            this.getLbtArticle()
            let wow = new WOW.WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true
            });
            wow.init();

        },
    }
</script>
<style lang="less" scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    
    .home {
        width: 100%;
    }
    
    .headImg {
        width: 100%;
        height: 260px;
    }
    
    // 轮播图
    .slideshowBox:hover .title {
        opacity: 1;
    }
    
    .slideshowBox {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        justify-content: center;
        align-content: center;
        cursor: pointer;
        .title {
            font-size: 40px !important;
            padding: 25px;
            color: #fff;
            opacity: 0;
            position: absolute;
            text-align: center;
            top: 60px;
            transition: all 0.5s;
        }
        .slideshow {
            flex: 2;
            border-radius: 5px;
        }
        .kk {
            flex: 1;
            padding: 0;
        }
    }
    
    .kk {
        background-color: rgba(255, 255, 255, 0);
        margin-right: 10px;
    }
    
    // 轮播图旁边的盒子
    .kk .img1 {
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        img {
            width: 100%;
            border-radius: 5px;
            height: 128px;
            transition: all 0.6s;
            cursor: pointer;
        }
        .tit {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgb(228, 225, 225);
            width: 100%;
            text-align: center;
        }
        img:hover {
            transform: scale(1.2);
        }
    }
    
    .main {
        padding: 20px !important;
        background-color: white !important;
    }
    
    .BlogList {
        margin-top: 15px;
        .title-box {
            margin-top: 15px;
        }
    }
    
    .rightBox {
        margin-top: 15px;
        .el-tag {
            margin: 5px;
        }
    }
</style>